11. Exercise: Add a Floating Action Button

Update Note:
At timestamp 03:26 in the video above, it demonstrates the use of a now deprecated class ViewModelProviders as
viewModel = ViewModelProviders.of(this).get(HomeViewModel::class.java).


Instead, please use ViewModelProvider

viewModel = ViewModelProvider(this).get(HomeViewModel::class.java), which is also shown in the instructions below.

Now it's your turn to complete this exercise yourself.

In this exercise you’ll start applying material design to your app by adding a Floating Action Button, or FAB, to the home screen.

1. Verify the material library is included in the project.

Open app/build.gradle and note that we’ve already provided you with the library you’ll need to include material design components.

 implementation "com.google.android.material:material:$version_material"

You’ll need to make some changes to your app's main layout before adding the FAB, which we’ll cover in the next few steps.

2. Replace the ScrollView with a NestedScrollView:

In home_fragment.xml, replace the ScrollView layout with a NestedScrollView layout:

    <androidx.core.widget.NestedScrollView
         android:layout_height="match_parent"
         android:layout_width="match_parent">

3. Wrap the NestedScrollView layout with a CoordinatorLayout:

<androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <androidx.core.widget.NestedScrollView
                android:layout_height="match_parent"
                android:layout_width="match_parent">
        <androidx.core.widget.NestedScrollView>

   </androidx.coordinatorlayout.widget.CoordinatorLayout>

4. Add a layout tag and viewModel variable.

Wrap the layout with a <layout> tag for data binding, and add a variable called viewModel of type HomeViewModel:

<layout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto">

   <data>

      <variable name="viewModel" type="com.example.android.gdgfinder.home.HomeViewModel" />
   </data>

5. Add the Floating Action Button.

In home_fragment.xml, add a FloatingActionButton component below the NestedScrollView but still inside the CoordinatorLayout:

<androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

   <androidx.core.widget.NestedScrollView
          android:layout_height="match_parent"
          android:layout_width="match_parent">
   <androidx.core.widget.NestedScrollView>

   <com.google.android.material.floatingactionbutton.FloatingActionButton
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_margin="16dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

6. Set the FAB’s image and set its size and placement.

Set the FAB's srcCompat to ic_gdg. Set its layout_gravity to end|bottom to display it at the bottom right of the screen.

<com.google.android.material.floatingactionbutton.FloatingActionButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="end|bottom"
      android:layout_margin="16dp"
      app:srcCompat="@drawable/ic_gdg" />

7. Add a click listener and data binding to the FAB.

Add an onClick attribute to the FAB, and use a data binding lambda to call viewModel.onFabClicked():

android:onClick="@{() -> viewModel.onFabClicked()}"

8. Bind HomeFragment binding to home_fragment layout.

In home/HomeFragment.kt, define a binding variable. Use HomeFragmentBinding.inflate to inflate the layout. Then assign the viewModel binding.

 val binding = HomeFragmentBinding.inflate(inflater)
 viewModel = ViewModelProvider(this).get(HomeViewModel::class.java)
 binding.viewModel = viewModel

As usual, you'll need to rebuild to making the binding object available.



9. Register an observer on navigateToSearch.

Pass viewLifecycleOwner as the first argument.**

When shouldNagivate is true, use the navController to navigate to gdgListFragment

And remember to call onNavigatedToSearch() once navigation is complete!

viewModel.navigateToSearch.observe(viewLifecycleOwner,
     Observer<Boolean> { shouldNavigate ->
         if (shouldNavigate == true) {
           val navController = binding.root.findNavController()
           navController.navigate(R.id.action_homeFragment_to_gdgListFragment)
           viewModel.onNavigatedToSearch()
          }
     })

     return binding.root

If you want to start at this step, you can download this exercise from: Step.04-Exercise-Add-Floating-Action-Button.

You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck, go back and watch the video again.

Once you’re done, you can check your solution against the solution we’ve provided here: Step.04-Solution-Add-Floating-Action-Button, or using this git diff.

Task List:

In home_fragment.xml, replace the ScrollView with a NestedScrollView and wrap the NestedScrollView with a CoordinatorLayout.

Wrap the entire layout in a <layout> tag with and define a viewModel <variable>.

Add a FloatingActionButton below the NestedScrollView but still inside the CoordinatorLayout.

Set the FAB image to ic_gdg and use layout_gravity to place it at the bottom right of the screen.

Add a click listener to the FAB, and use a data binding lambda to call viewModel onFabClicked().

In HomeFragment.kt, create a binding to the home_fragment layout and tell the binding about the viewModel.

Register an observer on navigateToSearch, and have it navigate to gdgListFragment if shouldNavigate is true.

Reference documentation

• Add a Floating Action Button

• FloatingActionButton

• Floating Action Buttons

• Buttons: floating action button